<template>
  <div class="tongzhi-page">
    <van-nav-bar
      title="通知设置"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      :border="false"
      :safe-area-inset-top="true"
    />
    <div class="section-card">
      <div class="section-title">推送通知</div>
      <div class="switch-row">
        <div class="switch-label">
          启用通知不遗漏重要消息，点击前往"设置"开启
        </div>
        <van-switch v-model="pushEnabled" size="22px" active-color="#7c5dfa" inactive-color="#e0e0e0" />
      </div>
    </div>
    <transition-group name="fade-slide" tag="div">
      <div class="section-card" v-if="pushEnabled" key="card1">
        <van-cell-group>
          <van-cell title="内容通知" is-link clickable />
          <van-cell title="健康膳食管理订阅通知" is-link clickable />
          <van-cell title="内容与创作订阅通知" is-link clickable />
          <van-cell title="开发者动态订阅通知" is-link clickable />
        </van-cell-group>
      </div>
      <div class="section-card" v-if="pushEnabled" key="card2">
        <van-cell-group>
          <van-cell title="社区互动通知" is-link clickable />
          <van-cell title="健康三餐推送通知" is-link clickable />
          <van-cell title="App内通知横幅" is-link clickable />
        </van-cell-group>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const pushEnabled = ref(true)
const onClickLeft = () => {
  router.back()
}
</script>

<style scoped>
.tongzhi-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e9eafc 0%, #e6e6fa 100%);
}

.van-nav-bar {
  background: #fff !important;
}

.van-nav-bar :deep(.van-nav-bar__title) {
  color: #333;
}

.van-nav-bar :deep(.van-icon) {
  color: #333;
}

.section-card {
  background: #fff;
  border-radius: 16px;
  margin: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.switch-label {
  font-size: 15px;
  color: #333;
}

.van-cell-group {
  background: transparent;
  box-shadow: none;
}

.van-cell {
  font-size: 15px;
  color: #333;
  background: #fff;
}

.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.4s cubic-bezier(.55,0,.1,1);
}

.fade-slide-enter-from, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
}

.fade-slide-enter-to, .fade-slide-leave-from {
  opacity: 1;
  transform: translateY(0) scale(1);
}
</style>